<template>
  <div class="Dbox">
    <!-- 设备列表 -->
    <div
      style="width: 380px; height: 100%; padding: 10px; background: #fff"
      v-show="show"
    >
      <div class="tabbox" style="margin-bottom: 10px">
        <div v-for="(item, i) in tabList" :key="i" class="tabbox_item">
          {{ item.label }}
        </div>
      </div>
      <div style="width: 100%; height: calc(100% - 50px); overflow-y: auto">
        <el-input
          placeholder="请输入内容"
          style="margin-bottom: 10px"
          class="inputcsls"
          v-model="valInput"
        >
          <el-button slot="append" icon="el-icon-search" @click="getsearch"
            >搜索</el-button
          >
        </el-input>
        <el-table
          :data="hbList"
          style="width: 100%"
          class="table"
          highlight-current-row
          @current-change="tableRowChange"
        >
          <el-table-column prop="buoyName" label="航标名称"> </el-table-column>
        </el-table>
        <el-pagination
          style="width: 100%"
          layout="prev, pager, next"
          :total="total"
          class="paginationLs"
          :current-page="currentPage"
          @current-change="handleCurrentChange"
        >
        </el-pagination>
      </div>
    </div>
    <!-- 详情 -->
    <div
      style="width: calc(100% - 380px); height: 100%; padding: 10px"
      :style="{ width: show ? 'calc(100% - 380px)' : '100%' }"
    >
      <div class="box_h box_bj" style="flex-direction: column">
        <div class="XboxTop">航标数据</div>
        <div class="box_h_cen">
          <div style="display: flex; width: 100%">
            <div
              style="width: calc(100% - 200px); display: flex; flex-wrap: wrap"
            >
              <div v-for="(item, i) in zdList" :key="i" class="box_2Xw">
                <div>{{ item.label }}</div>
                <div>
                  <span>{{ xqData[item.code] }}</span>
                  <span>{{ item.unit }}</span>
                </div>
              </div>
            </div>
            <div style="width: 200px">
              <div>操作：</div>
              <div></div>
            </div>
          </div>
        </div>
      </div>
      <div class="box_h box_bj" style="flex-direction: column">
        <div class="XboxTop">能源微基站数据</div>
        <div class="box_h_cen">
          <div v-for="(item, i) in jzZdList" :key="i" class="box_3Xw">
            <div>{{ item.label }}</div>
            <div>
              <span>{{ xqData[item.code] }}</span>
              <span>{{ item.unit }}</span>
            </div>
          </div>
        </div>
      </div>
      <div class="box_h box_bj" style="flex-direction: column">
        <div class="XboxTop">航标灯数据</div>
        <div class="box_h_cen">
          <div v-for="(item, i) in hbdzdList" :key="i" class="box_4Xw">
            <div>{{ item.label }}</div>
            <div>
              <span>{{ xqData[item.code] }}</span>
              <span>{{ item.unit }}</span>
            </div>
          </div>
        </div>
      </div>
      <div class="box_h box_bj" style="flex-direction: column">
        <div class="XboxTop">遥控操作及状态</div>
        <div class="box_h_cen">
          <el-table :data="tableData" style="width: 100%" class="table">
            <el-table-column prop="date" label="遥控操作"> </el-table-column>
            <el-table-column prop="name" label="信息状态"> </el-table-column>
          </el-table>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { mainlist, buoylist, getBuoy } from "@/api/hbyxgl.js";
export default {
  //变量
  data() {
    return {
      show: true,
      tabList: [
        { label: "在线航标", code: "0" },
        { label: "离线航标", code: "1" },
        { label: "异常航标", code: "2" },
      ],
      valInput: "",
      currentPage: 1,
      total: 0,
      form: {},
      hbList: [],
      xqData: { a: 123 },
      zdList: [
        { label: "航标名称：", code: "buoyName", unit: "" },
        { label: "航标编号：", code: "buoyNumber", unit: "" },
        { label: "航标状态：", code: "onlineStatus", unit: "" },
        { label: "航标ID：", code: "id", unit: "" },
        { label: "航标位置：", code: "buoyAddress", unit: "" },
        { label: "摄像头数量：", code: "a", unit: "" },
      ],
      jzZdList: [
        { label: "电压：", code: "voltage", unit: "" },
        { label: "电流：", code: "electriccurrent", unit: "" },
        { label: "电能：", code: "electricEnergy", unit: "" },
        { label: "功率：", code: "power", unit: "" },
        { label: "温度：", code: "temperature", unit: "" },
        { label: "门禁状态：", code: "mjzt", unit: "" },
      ],
      hbdzdList: [
        { label: "状态：", code: "dzt", unit: "" },
        { label: "经度：", code: "dqGpsLon", unit: "" },
        { label: "纬度：", code: "dqGpsLat", unit: "" },
        { label: "电能：", code: "electricEnergy", unit: "" },
        { label: "工作电压：", code: "dqDqGzdy", unit: "" },
        { label: "工作电流：", code: "dqDqGzdl", unit: "" },
        { label: "充电电量：", code: "cddl", unit: "" },
        { label: "湿度：", code: "humidity", unit: "" },
        { label: "运行模式：", code: "hbdszYxms", unit: "" },
        { label: "灯状态：", code: "dzt", unit: "" },
        { label: "低功耗状态：", code: "xtztDgh", unit: "" },
        { label: "终端GPS状态：", code: "xtztzdgps", unit: "" },
        { label: "日光阈值：", code: "hbdDqRgyz", unit: "" },
      ],
      tableData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
      ],
    };
  },
  //初始
  mounted() {
    const userId = this.$route.query && this.$route.query.id;
    if (userId) {
      this.show = false;
      this.getBuoy(userId);
    } else [(this.show = true)];

    this.getbuoylist();
  },
  //事件
  methods: {
    getsearch() {
      console.log("getsearch");
      this.getbuoylist();
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.getbuoylist();
    },
    getbuoylist() {
      buoylist({
        pageNum: this.currentPage,
        pageSize: 10,
        buoyName: this.valInput,
      }).then((res) => {
        this.hbList = res.rows;
        // this.total = res.total;
      });
    },
    tableRowChange(row) {
      console.log(row);
      this.getBuoy(row.id);
    },
    getBuoy(id) {
      getBuoy({ id: id }).then((res) => {
        this.xqData = res;
      });
    },
  },
  //销毁
  beforeDestroy() {},
};
</script>
<style scoped>
.Dbox {
  /* background: rgba(0, 21, 121, 0.5); */
  background: #f3f3f4;
  width: 100%;
  height: 100%;
  display: flex;
  /* color: #fff; */
}
.box_h {
  display: flex;
}
.box_2Xw {
  width: calc(100% / 2);
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}
.box_3Xw {
  width: calc(100% / 3);
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}
.box_4Xw {
  width: calc(100% / 4);
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}
.box_bj {
  /* background: rgba(0, 21, 121, 0.5); */
  background: #fff;
  margin-bottom: 10px;
}
.box_h_cen {
  width: calc(100%);
  height: calc(100% - 36px);
  display: flex;
  flex-wrap: wrap;
  padding: 10px;
}
.XboxTop {
  width: 100%;
  height: 36px;
  /* background-color: rgba(0, 78, 163, 0.8);
   */
  /* background: url("~@/assets/hb_img/bj/btbj.png") no-repeat; */
  border-bottom: 1px solid #ccc;
  background-size: 100% 100%;
  /* color: #fff; */
  display: flex;
  align-items: center;
  padding-left: 20px;
}
.tabbox {
  display: flex;
  justify-content: space-between;
}
.tabbox_item {
  width: calc(100% / 3 - 5px);
  background: rgba(0, 21, 121, 0.5);
  text-align: center;
  padding: 5px 10px;
  cursor: pointer;
}
.tabbox_item_xz {
}
.table ::v-deep .el-table__header-wrapper th {
  /* background-color: rgba(0, 21, 121, 1);
  color: #fff; */
}
.table ::v-deep .el-table__header-wrapper tr {
  /* background-color: rgba(0, 21, 121, 0.5);
  color: #fff; */
}
.table ::v-deep .el-table__body-wrapper {
  /* background-color: rgba(0, 21, 121, 0.5);
  color: #fff;
  border: 1px solid rgba(0, 21, 121, 0.5); */
}
.table ::v-deep .el-table__body-wrapper tr {
  /* background-color: rgba(0, 21, 121, 0.5);
  color: #fff;
  border: 1px solid rgba(0, 21, 121, 0.5); */
}
.table ::v-deep .el-table__body-wrapper .current-row .el-table__cell {
  /* background-color: rgba(0, 21, 121, 0.7);
  color: #fff; */
  /* border: 1px solid rgba(0, 21, 121, 0.7); */
}

.table ::v-deep .el-table__body tr:hover > td {
  /* background-color: rgba(0, 21, 121, 0.6) !important; */
}

/* -------------------------------------- */
.inputcsls ::v-deep .el-input__inner {
  /* background-color: rgba(0, 21, 121, 0.5);
  color: #fff;
  border: 1px solid rgba(0, 21, 121, 0.5); */
}
.inputcsls ::v-deep .el-input-group__append {
  /* background-color: rgba(0, 21, 121, 0.5);
  color: #fff;
  border: 1px solid rgba(0, 21, 121, 0.5); */
}
/* --------------------------------------- */
.paginationLs ::v-deep .el-pager li {
  /* background-color: rgba(0, 21, 121, 0.5);
  color: #fff;
  border: 1px solid rgba(0, 21, 121, 0.5); */
}
.paginationLs ::v-deep .el-pager li.active {
  /* background-color: rgba(0, 21, 121, 0.5);
  color: #1890ff;
  border: 1px solid rgba(0, 21, 121, 0.5); */
}
.paginationLs ::v-deep .btn-prev {
  /* background-color: rgba(0, 21, 121, 0.5);
  color: #fff;
  border: 1px solid rgba(0, 21, 121, 0.5); */
}
.paginationLs ::v-deep .btn-next {
  /* background-color: rgba(0, 21, 121, 0.5);
  color: #fff;
  border: 1px solid rgba(0, 21, 121, 0.5); */
}
</style>
